<!DOCTYPE html><html><head> 
  <link href="../css/main.css" rel="stylesheet" type="text/css" /> 
  <script type="text/javascript" src="../MarkdownWebapp/MarkdownWebapp.nocache.js"></script> 
  <script type="text/javascript" src="../ace/ace.js"></script> 
  <link rel="icon" type="image/x-icon" href="../favicon.ico" /> 
  <script type="text/javascript">window["_GOOG_TRANS_EXT_VER"] = "1";</script> 
  <title>Cmd 向导 | 资源管理</title> 
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1" /> 
  <script async="" type="text/javascript" src="../../../https@use.typekit.com/bqo8qzg.js"></script> 
  <script type="text/javascript">

    function showMenu(link_obj){
      var menu = document.getElementById("tpl-toc");

      link_obj.innerHTML = (link_obj.innerHTML == 'CLOSE MENU') ? 'MENU' : 'CLOSE MENU';

      if(menu.style.display == 'block'){
        menu.style.display = 'none';
      }else{
        menu.style.display = 'block';
      }
    }

  </script> 
 </head> 
 <body> 
  <div id="header"> 
   <a href="../../../www.sencha.com/default.htm"><img class="sencha-logo" src="../images/logo.png" /></a> 
   <h1 id="current-product"><a href="#">Cmd 向导 ▼</a></h1> 
   <div id="mobile_menu"> 
    <a id="mobile_menu_link" onclick="showMenu(this);" href="#">MENU</a> 
   </div> 
    
  </div> 
  <div id="content" itemscope="" itemtype="http://schema.org/Article"> 
   <div id="tpl-toc"> 
    <div id="tpl-toc-content"> 
     <a class="toggle-button" href="#">expand</a> 
     <ul> 
      <li class="file"><a href="../../default.htm" data-full-load="true" title="Home">Sencha 向导</a></li> 
      <li class="file"><a href="index.html" data-full-load="true" title="Cmd Home">Sencha Cmd 向导</a></li> 
      <li class="file"><a href="whats_new_cmd.html" title="">Cmd 6 新特性</a></li> 
      <li class="file"><a href="fashion.html" title="">欢迎使用 Fashion</a></li> 
      <li class="file"><a href="cmd_upgrade_guide.html" title="Sencha Cmd 6 - 升级向导">Sencha Cmd 6 - 升级向导</a></li> 
      <li class="file"><a href="intro_to_cmd.html" title="Sencha Cmd 介绍">Sencha Cmd 介绍</a></li> 
      <li class="file"><a href="cmd_upgrade.html" title="理解 App 升级">理解 App 升级</a></li> 
      <li class="file"><a href="cmd_compiler.html" title="对编译器友好的代码原则">对编译器友好的代码原则</a></li> 
      <li class="file"><a href="cordova_phonegap.html" title="Cordova 和 Phonegap 应用">Cordova 和 Phonegap 应用</a></li> 
      <li class="file"><a href="workspaces.html" title="Sencha Cmd 的 Workspace">Sencha Cmd 的 Workspace</a></li> 
      <li class="file"><a href="microloader.html" title="加载器 Microloader">加载器 Microloader</a></li> 
      <li class="file"><a href="resource_management.html" title="资源管理">资源管理</a><span class="tpl-toc-img-new">★</span></li> 
      <li class="file"><a href="compatibility_matrix.html" title="Sencha Cmd 兼容性列表">Sencha Cmd 兼容性列表</a><span class="tpl-toc-img-new">★</span></li> 
      <li class="folder"><a href="#">Sencha Cmd 包(Packages)</a> 
       <ul expand="false"> 
        <li class="file"><a href="cmd_packages/cmd_packages.html" title="Sencha Cmd 包(Packages)">Sencha Cmd 包(Packages)</a></li> 
        <li class="file"><a href="cmd_packages/cmd_creating_packages.html" title="创建包(Packages)">创建包(Packages)</a></li> 
       </ul></li> 
      <li class="folder"><a href="#">Sencha Cmd 进阶</a> 
       <ul expand="false"> 
        <li class="file"><a href="advanced_cmd/cmd_advanced.html" title="Sencha Cmd 进阶">Sencha Cmd 进阶</a></li> 
        <li class="file"><a href="advanced_cmd/cmd_build.html" title="App Build 过程内部机制">App Build 过程内部机制</a></li> 
        <li class="file"><a href="advanced_cmd/cmd_compiler_reference.html" title="Sencha 编译器 参考">Sencha 编译器 参考</a></li> 
        <li class="file"><a href="advanced_cmd/cmd_ant.html" title="Ant 集成">Ant 集成</a></li> 
        <li class="file"><a href="advanced_cmd/cmd_metadata.html" title="Sencha Cmd Metadata">Sencha Cmd Metadata</a></li> 
        <li class="file"><a href="advanced_cmd/cmd_reference.html" title="Sencha Cmd 参考">Sencha Cmd 参考</a></li> 
       </ul></li> 
      <li class="folder"><a href="#">Ext JS</a> 
       <ul expand="false"> 
        <li class="file"><a href="extjs/cmd_app.html" title="">Sencha Cmd 结合 Ext JS</a></li> 
       </ul></li> 
      <li class="folder"><a href="#">Sencha Touch</a> 
       <ul expand="false"> 
        <li class="file"><a href="touch/cmd_app.html" title="">Sencha Cmd 结合 Sencha Touch</a></li> 
       </ul></li> 
      <li class="file"><a href="sencha_blog.html" title="Sencha 博客">Sencha 博客</a></li> 
     </ul> 
    </div> 
   </div> 
   <div id="middle"> 
    <div id="tpl-content"> 
     <div> 
      <div class="toc-page" style="display:block;">
        Contents 
       <a class="toc-page-h2" href="#Introduction" title="Introduction">Introduction</a> 
       <a class="toc-page-h2" href="#Setup" title="Setup">Setup</a> 
       <a class="toc-page-h2" href="#Application_Resources" title="Application Resources">Application Resources</a> 
       <a class="toc-page-h3" href="#app_json" title="app.json">app.json</a> 
       <a class="toc-page-h3" href="#Themes" title="Themes">Themes</a> 
       <a class="toc-page-h4" href="#Resource_Composition" title="Resource Composition">Resource Composition</a> 
       <a class="toc-page-h3" href="#Code_Packages" title="Code Packages">Code Packages</a> 
       <a class="toc-page-h2" href="#Package_Resources" title="Package Resources">Package Resources</a> 
       <a class="toc-page-h3" href="#package_json" title="package.json">package.json</a> 
       <a class="toc-page-h3" href="#Package_Builds" title="Package Builds">Package Builds</a> 
       <a class="toc-page-h3" href="#Resource_Paths" title="Resource Paths">Resource Paths</a> 
       <a class="toc-page-h2" href="#Universal_Applications_and_Build_Profiles" title="Universal Applications and Build Profiles">Universal Applications and Build Profiles</a> 
       <a class="toc-page-h3" href="#app_json" title="app.json">app.json</a> 
       <a class="toc-page-h4" href="#builds" title="builds">builds</a> 
       <a class="toc-page-h4" href="#output" title="output">output</a> 
       <a class="toc-page-h4" href="#Resources" title="Resources">Resources</a> 
       <a class="toc-page-h3" href="#Shared_Resources" title="Shared Resources">Shared Resources</a> 
       <a class="toc-page-h4" href="#Shared_Package_Resources" title="Shared Package Resources">Shared Package Resources</a> 
       <a class="toc-page-h4" href="#Locating_Shared_Resources" title="Locating Shared Resources">Locating Shared Resources</a> 
       <a class="toc-page-h3" href="#Packages_and_Build_Profiles" title="Packages and Build Profiles">Packages and Build Profiles</a> 
       <a class="toc-page-h2" href="#Conclusion" title="Conclusion">Conclusion</a> 
      </div> 
      <div id="tpl-content-name" itemprop="name"> 
       <h1>资源管理</h1> 
      </div> 
      <div id="tpl-content-articleBody" itemprop="articleBody"> 
       <h2 id="Introduction">Introduction</h2> 
       <p>Web applications commonly include images and other non-code assets (such as video clips, data files, etc.) in addition to their JavaScript, HTML and CSS content. Sencha Cmd categorizes these additional assets as “resources” and provides several options for their management. The best way to understand these options is to start simple and grow the scenario one layer at a time.</p> 
       <h2 id="Setup">Setup</h2> 
       <p>To begin, let’s generate a workspace that will contain all of the applications and packages that we’re going to discuss below. You can do so by issuing the following commands via your CLI:</p> 
       <pre mode="javascript" theme="chrome"><code>sencha -sdk /path/to/extjs6 generate workspace ./workspace

cd workspace

sencha generate app --ext --classic MyApp ./myapp

sencha generate app --ext UniversalApp ./myuniversalapp

sencha generate package arrow-button</code></pre> 
       <p>Here’s the resulting file structure for our workspace:</p> 
       <p><img src="images/workspace_build.png" alt="workspace build" /></p> 
       <p>Workspaces are not required to utilize the basic concepts of this guide. However, when dealing with multiple applications and/or packages, a workspace is recommended for coordinating frameworks and builds. For more information about workspaces, please check out our <a href="workspaces.html">workspace guide</a>. </p> 
       <p><strong>Note</strong>: Generating a package while in an application directory will automatically add the package as an application dependency by default. If you need to manually add the package to your application, simply add the package name to your <code>app.json's</code> requires block like so:</p> 
       <pre mode="javascript" theme="chrome"><code>&quot;requires&quot;: [
      &quot;font-awesome&quot;,
      &quot;arrow-button&quot;
  ],</code></pre> 
       <h2 id="Application_Resources">Application Resources</h2> 
       <p>Let’s begin by evaluating our classic toolkit application under the “myapp” folder. The standard structure for a single-toolkit application looks like this:</p> 
       <pre mode="javascript" theme="chrome"><code>app/
    view/
    ...
resources/   # home for app resources
sass/
app.json</code></pre> 
       <h3 id="app_json">app.json</h3> 
       <p><code>&quot;app.json&quot;</code>, the application descriptor, contains many configuration options. However, the “resources” array describes the location of the application’s resources:</p> 
       <pre mode="javascript" theme="chrome"><code>&quot;resources&quot; [{
    &quot;path&quot;: &quot;resources&quot;,
    &quot;output&quot;: &quot;shared&quot;
...
}]</code></pre> 
       <p>In single-toolkit applications such as this one, only the first entry (shown above) corresponds to an actual resource folder. The remaining entries (and the “output” property of this first entry) are simply ignored in this case, but will come into play for universal applications (more below).</p> 
       <p>The top-level “output” object in <code>&quot;app.json&quot;</code> completes the picture by specifying the output locations for the application’s build. The starting point of this is the output base:</p> 
       <pre mode="javascript" theme="chrome"><code>&quot;output&quot;: {
    &quot;base&quot;: &quot;${workspace.build.dir}/${build.environment}/${app.name}&quot;,
    ...
},</code></pre> 
       <p>The output base directory is the root location where all build products are placed. In the above, the output base is a formula that uses several configuration variables, which are expanded by Sencha Cmd when it loads the <code>&quot;app.json&quot;</code> file. In this case, the expansion would produce the following path:</p> 
       <pre mode="javascript" theme="chrome"><code>./workspace/build/production/MyApp</code></pre> 
       <p>By default, resources are copied to a “resources” subfolder in this directory. This arrangement means that the relative paths in development mode will match the relative paths in the build folder.</p> 
       <h3 id="Themes">Themes</h3> 
       <p>Many of the resources needed by an application are provided by its theme. You can specify a theme via <code>&quot;app.json&quot;</code> like so:</p> 
       <pre mode="javascript" theme="chrome"><code>&quot;theme&quot;: &quot;theme-triton&quot;,</code></pre> 
       <p>Themes often extend other themes, which allows resources to be inherited and overridden as needed. The base theme for Triton is Neptune, so the resources for both of these themes will be inherited by the application and copied into the “resources” folder. </p> 
       <p>To illustrate this process, let’s consider the propagation of a particular image resource:</p> 
       <pre mode="javascript" theme="chrome"><code>theme-neptune/
    resources/
        images/
            loadmask/
               loading.gif</code></pre> 
       <p>Now, build your application like so:</p> 
       <pre mode="javascript" theme="chrome"><code>sencha app build --production</code></pre> 
       <p>The <code>&quot;loading.gif&quot;</code> is copied from Neptune’s “resources” folder into the application’s build output. The resulting output looks something like this:</p> 
       <pre mode="javascript" theme="chrome"><code>build/
    production/
        MyApp/
            index.html    # the output page
            resources/
                images/
                    loadmask/
                       loading.gif  # from theme-neptune</code></pre> 
       <p>As you can see, the build output now contains an image resource that it inherited from its base theme.</p> 
       <h4 id="Resource_Composition">Resource Composition</h4> 
       <p>In the above example, the <code>&quot;images/loadmask/loading.gif&quot;</code> resource was inherited from its base theme, Triton. If the application were to create its own GIF file in its own “resources” folder at the same relative path, that GIF would override the image from the theme.</p> 
       <p>You can use the following loading gif to see the application resource override in action if you’re following along:</p> 
       <p><img src="images/loading.gif" alt="loading mask image" /></p> 
       <p>To override a resource provided by the theme, place your replacement image in the resources folder corresponding to the theme’s resources folder. In this case, we’re overriding the theme’s loadmask “loading.gif” file. So you’d put your image here:</p> 
       <pre mode="javascript" theme="chrome"><code>app/
    view/
    ...
resources/
    images/
        loadmask/
           loading.gif   # override theme image
sass/
app.json</code></pre> 
       <p>Now, you can just build the production version of your application and you should see your application’s “loading.gif” in the resulting build resource folder.</p> 
       <p>Similarly, the Triton theme could have overridden the image from Neptune but this would have been transparent to the application. The application’s only concern is that the configured theme uses this image; whether this image comes from the application itself or from the theme (or an inherited theme) is completely flexible.</p> 
       <h3 id="Code_Packages">Code Packages</h3> 
       <p>Similar to themes, code packages can also contain resources. These resources are also copied into the “resources” build output folder. To protect multiple, independently developed packages from colliding, however, these resources are placed in a folder named by the package name.</p> 
       <p>For example, let’s visit the “arrow-button” package we generated above. This package should contain an image in its resources, which will assist in illustrating the package’s resource management.</p> 
       <p>**Note: **You can use the following arrows for your convenience if you’re following along with this guide:</p> 
       <p><img src="images/arrow.png" alt="green arrow" /></p> 
       <p><img src="images/arrow2.png" alt="red arrow" /></p> 
       <p>The package will contain a structure that looks like this: </p> 
       <pre mode="javascript" theme="chrome"><code>resources/
    images/
        arrow.png   # the arrow image used by this package
    ...
sass/
package.json</code></pre> 
       <p>Upon building your application’s production build, the package’s resources are copied into the application build like so:</p> 
       <pre mode="javascript" theme="chrome"><code>build/
    production/
        MyApp/
            index.html    # the output page
            resources/
                arrow-button/   # the package's resource &quot;sandbox&quot;
                    images/
                       arrow.png</code></pre> 
       <p>As with themes, the application can override these resources as well:</p> 
       <pre mode="javascript" theme="chrome"><code>app/
    view/
    ...
resources/
    arrow-button/
        images/
           arrow.png   # override package's image
sass/
app.json</code></pre> 
       <p>Visually this process looks something like this:</p> 
       <p><img src="images/app_override.png" alt="application override resources" /></p> 
       <h2 id="Package_Resources">Package Resources</h2> 
       <p>As shown above, applications consume package resources and integrate them into their builds. This process is guided by the package descriptor (<code>&quot;package.json&quot;</code>) as is the process of building an individual package.</p> 
       <h3 id="package_json">package.json</h3> 
       <p>The package descriptor is similar to the application descriptor (<code>&quot;app.json&quot;</code>). This file is where the package author can configure resource locations and build output locations. For example:</p> 
       <pre mode="javascript" theme="chrome"><code>&quot;output&quot;: &quot;${package.dir}/build&quot;,</code></pre> 
       <p>Similar to the “output” configuration from <code>&quot;app.json&quot;</code>, the above determines where package resources are copied during a package build. The “resources” object is not present by default in <code>&quot;package.json&quot;</code>, but behaves as if this were present:</p> 
       <pre mode="javascript" theme="chrome"><code>&quot;resources&quot;: [{
    &quot;path&quot;: &quot;resources&quot;
}]</code></pre> 
       <p>This is the same object used by <code>&quot;app.json&quot;</code>.</p> 
       <h3 id="Package_Builds">Package Builds</h3> 
       <p>For a package to be easily consumed by non-Cmd applications, it must be built by running the following in the package directory:</p> 
       <pre mode="javascript" theme="chrome"><code>sencha package build</code></pre> 
       <p>Unlike application builds, package builds do not have the concept of an environment like “production” or “testing”. Instead a package build produces both compressed, optimized code and uncompressed, debuggable code.</p> 
       <pre mode="javascript" theme="chrome"><code>build/
    arrow-button-debug.js
    arrow-button.js
    resources/
        images/
            arrow.png   # the arrow image used by this package
...
package.json</code></pre> 
       <p>The contents of the “build” folder are then directly usable as <code>script</code> and <code>link</code> elements in applications that do not use Sencha Cmd.</p> 
       <h3 id="Resource_Paths">Resource Paths</h3> 
       <p>The difference between the package build and application build, as it relates to resources, is that application builds create a resource sandbox for the package’s resources. This means that the relative path from the CSS file to the package’s resources will be different between package builds and application builds.</p> 
       <p>In both <code>.scss</code> and <code>.js</code> code, there are API’s that determine the proper path to a given resource. For example, the arrow button might have a CSS rule like this:</p> 
       <pre mode="javascript" theme="chrome"><code>.arrow-button {
    background-image: url(get-resource-path('images/arrow.png'));
}</code></pre> 
       <p>In the package build, <code>get-resource-path</code> will not sandbox the resources. When used in an application build, however, <code>get-resource-path</code> will properly sandbox the package’s resources.</p> 
       <p>In JavaScript, the <code>Ext.getResourcePath</code> API does the same job.</p> 
       <pre mode="javascript" theme="chrome"><code>image.setSrc(
    Ext.getResourcePath('images/arrow.png', null, 'arrow-button')
);</code></pre> 
       <p>Unlike <code>get-resource-path</code>, the JavaScript equivalent method <code>Ext.getResourcePath</code>, cannot determine the package name by default and so it must be provided. This argument is only needed for code packages, however. Theme packages do not need this argument since their resources are not sandboxed. </p> 
       <p><strong>Note</strong>: The <code>null</code> second argument is the resource pool name, which is not used in this case. It is more commonly used by universal applications.</p> 
       <h2 id="Universal_Applications_and_Build_Profiles">Universal Applications and Build Profiles</h2> 
       <p>The application and package discussed so far have been pretty standard examples of Sencha applications up through version 5. The introduction of universal applications in Ext JS 6 and their use of build profiles adds another variable to the resource equation.</p> 
       <p>While build profiles are discussed in more details in the <a href="microloader.html">Microloader Guide</a>, they can be summarized as a way to instruct Sencha Cmd to build multiple, independently optimized flavors of an application. The application decides at page load time which build profile to load based on whatever policy is appropriate for the application.</p> 
       <p>For example, build profiles can be used to support multiple themes or locales. In an Ext JS 6 universal application, build profiles are used to target the modern and classic toolkits (typically to create optimized builds that target mobile and desktop, respectively).</p> 
       <p>Let’s go ahead and open up the universal application that we generated above so we can walk through some of the differences. </p> 
       <h3 id="app_json">app.json</h3> 
       <p>To start, let’s open the <code>app.json</code> file from the root of “myuniversalapp”.</p> 
       <h4 id="builds">builds</h4> 
       <p>Build profiles are the properties of the “builds” object in <code>&quot;app.json&quot;</code>. The Ext JS 6 starter application has the following “builds” object:</p> 
       <pre mode="javascript" theme="chrome"><code>&quot;builds&quot;: {

    &quot;classic&quot;: {
        &quot;toolkit&quot;: &quot;classic&quot;,
        &quot;theme&quot;: &quot;theme-triton&quot;
    },

    &quot;modern&quot;: {
        &quot;toolkit&quot;: &quot;modern&quot;,
        &quot;theme&quot;: &quot;theme-triton&quot;
    }

},</code></pre> 
       <p>The “classic” and “modern” property names were chosen to match their respective “toolkit” option, but could have been called anything. To avoid confusing toolkit names with build profile names, the names for this example will be “foo” and “bar”:</p> 
       <pre mode="javascript" theme="chrome"><code>&quot;builds&quot;: {

    &quot;bar&quot;: {
        &quot;toolkit&quot;: &quot;classic&quot;,
        &quot;theme&quot;: &quot;theme-triton&quot;
    },

    &quot;foo&quot;: {
        &quot;toolkit&quot;: &quot;modern&quot;,
        &quot;theme&quot;: &quot;theme-triton&quot;
    }

},</code></pre> 
       <p>Because build profiles adjust fundamental things like “toolkit” and “theme” (and therefore produce different CSS files), their resources must be isolated from each other. In other words, the “foo” build profile will have its own CSS file and therefore must keep its resources separate from those of the “bar” build profile.</p> 
       <p>This isolation is necessary for some resources, but there are also resources that both build profiles may want to share (such as a video clip).</p> 
       <h4 id="output">output</h4> 
       <p>The <code>&quot;app.json&quot;</code> file’s “output” object can be adjusted to handle both of these scenarios. This is done by default for a universal starter application:</p> 
       <pre mode="javascript" theme="chrome"><code>&quot;output&quot;: {

    &quot;base&quot;: &quot;${workspace.build.dir}/${build.environment}/${app.name}&quot;,
    ...
    &quot;resources&quot;: {
        &quot;path&quot;: &quot;${build.id}/resources&quot;,
        &quot;shared&quot;: &quot;resources&quot;
    }

},</code></pre> 
       <p>The “resources” object properties (“path” and “shared”) are called “resource pools”. Prior to Sencha Cmd 6.0.1, there was only one resource output location (“output.resources.path”). In Sencha Cmd 6.0.1 this is now the default resource pool. There is also a new “shared” resource pool as well, but there can be any number of additional output locations added to the object.</p> 
       <p>In the above configuration, resources will be placed in the same subdirectory as the CSS file. This is based on the “build.id” property expansion to be the name of the build profile (“foo” or “bar”). It is important to note that all relative paths in the “output” object are relative to the “output.base”.</p> 
       <p>Let’s go ahead and build UniversalApp so we can have a look at the resulting build folder. Simply “cd” into “myuniversalapp” and issue the following command from your CLI:</p> 
       <pre mode="javascript" theme="chrome"><code>sencha app build --production</code></pre> 
       <p><strong>Note</strong>: This will create a build for both build targets: foo and bar.</p> 
       <p>Looking at the resulting build folder:</p> 
       <pre mode="javascript" theme="chrome"><code>build/
    production/
        UniversalApp/
            index.html    # the output page
            bar/          # the build profile using &quot;classic&quot;
                resources/
                    UniversalApp-all.css
                    images/
                        loadmask/
                            loading.gif  # from theme-neptune
            foo/          # the build profile using &quot;modern&quot;
                resources/
                    UniversalApp-all.css
                    ...</code></pre> 
       <h4 id="Resources">Resources</h4> 
       <p>Corresponding to the resource pools above is the optional “output” property on each entry in the top-level “resources” array.</p> 
       <pre mode="javascript" theme="chrome"><code>&quot;resources&quot;: [{
    &quot;path&quot;: &quot;resources&quot;,
    &quot;output&quot;: &quot;shared&quot;   # targets the &quot;shared&quot; resource pool
}, {
    &quot;path&quot;: &quot;${toolkit.name}/resources&quot;   # uses the default pool
}],</code></pre> 
       <p>Given these resource locations, a universal application can still override the <code>&quot;loading.gif&quot;</code> but to do so it would move the image into the <code>&quot;classic/resources&quot;</code> folder.</p> 
       <pre mode="javascript" theme="chrome"><code>app/
    view/
    ...
resources/
    ...
classic/       # from the ${toolkit.name} in the resources array
    resources/
        images/
            loadmask/
               loading.gif   # override theme image
sass/
app.json</code></pre> 
       <h3 id="Shared_Resources">Shared Resources</h3> 
       <p>When a resource can be shared, it should be put in the top-level <code>&quot;resources&quot;</code> folder as opposed to <code>&quot;classic/resources&quot;</code> or <code>&quot;modern/resources&quot;</code>. For example:</p> 
       <pre mode="javascript" theme="chrome"><code>app/
    view/
    ...
resources/
    video.mp4
classic/
    resources/
sass/
app.json</code></pre> 
       <p>This folder is associated with the “shared” resource pool, which is directed to the <code>&quot;resources&quot;</code> folder at the root of the build output directory:</p> 
       <pre mode="javascript" theme="chrome"><code>build/
    production/
        UniversalApp/
            index.html    # the output page
            resources/    # shared resource pool
                video.mp4
            foo/          # build profile
                ...
            bar/          # build profile
                ...</code></pre> 
       <p>By default, packages resources are not shared which results in a build output that looks like this:</p> 
       <p><img src="images/unshared_package_resources.png" alt="unshared package resources" /></p> 
       <p>In the case of a theme package this isolation is necessary and this same logic is applied to all packages by default. In Sencha Cmd 6.0.1, however, package resources can also be shared.</p> 
       <h4 id="Shared_Package_Resources">Shared Package Resources</h4> 
       <p>Packages, like applications, can describe resources that target specific resource pools by specifying a resource pool name using the “output” property on a resource entry. For example, the “font-awesome” package contains almost 800 KB of font assets which need not be duplicated for each build profile. To support this optimization, the <code>&quot;package.json&quot;</code> file for “font-awesome” looks contains this:</p> 
       <pre mode="javascript" theme="chrome"><code>&quot;resources&quot;: [{

    &quot;path&quot;: &quot;${package.dir}/resources&quot;,

    &quot;output&quot;: &quot;shared&quot;

}]</code></pre> 
       <p>For applications that do not define resource pools, these resources will be placed in the default resource pool. While this may be inefficient in some cases, this ensures that the assets will be mutually available. It is therefore always recommended to declare a “shared” resource pool in applications that use build profiles.</p> 
       <p>Modifying the “arrow-button” resources to follow the pattern used by “font-awesome” produces the following build output:</p> 
       <p><img src="images/shared_package_resources.png" alt="shared package resources" /></p> 
       <h4 id="Locating_Shared_Resources">Locating Shared Resources</h4> 
       <p>To locate a shared resource in <code>.scss</code>, you can provide the resource pool name to the <code>get-resource-path</code> API:</p> 
       <pre mode="javascript" theme="chrome"><code>background: url(get-resource-path('images/foo.png', $pool: 'shared'));</code></pre> 
       <p>And in JavaScript:</p> 
       <pre mode="javascript" theme="chrome"><code>image.setSrc(Ext.getResourcePath('images/foo.png', 'shared'));</code></pre> 
       <p>Some component configs will accept URL’s resource pool tags (such as Ext.Img#src):</p> 
       <pre mode="javascript" theme="chrome"><code>items: [{
    xtype: 'img',
    src: '&lt;shared&gt;images/foo.png'
}]</code></pre> 
       <h3 id="Packages_and_Build_Profiles">Packages and Build Profiles</h3> 
       <p>Package builds also provide support for build profiles. These are very similar to applications but package build profiles are used to create package build artifacts for use by non-Cmd applications. Packages, therefore, use build profiles to create multiple flavors of builds perhaps by toolkit or by theme depending on how these variables affect the usability of their code or styling.</p> 
       <h2 id="Conclusion">Conclusion</h2> 
       <p>The resource management options in Sencha Cmd allow you to describe your input resources and flexibly control the shape of the build output. Combined with the API’s necessary to determine final resource locations, all this flexibility does not have to translate into code complexity.</p> 
      </div> 
      <div class="tpl-content-lastUpdated">
        Last updated 
       <div id="tpl-content-lastUpdated-date" itemprop="datePublished" datetime="2016-04-01T13:04Z">
         April 1, 2016 
       </div> 
      </div> 
     </div> 
    </div> 
   </div> 
  </div> 
  <div id="footer"> 
   <div id="footer-social"> 
    <div class="g-plusone" data-size="medium" data-annotation="none"></div> 
   </div> 
   <div id="footer-content"> 
    <a href="../../../www.sencha.com/products">Products</a> | 
    <a href="../../../www.sencha.com/services">Services</a> | 
    <a href="../../../www.sencha.com/support">Support</a> | 
    <a href="../../../www.sencha.com/training">Training</a> | 
    <a href="../../../www.sencha.com/partners">Partners</a> | 
    <a href="../../../www.sencha.com/blog">Community</a> | 
    <a href="../../../www.sencha.com/company">Company</a> 
   </div> 
  </div> 
  <div id="menu-product-container" style="display:none;"> 
   <div id="menu-dropdown"> 
    <div class="menu-landing-products"> 
     <div id="menu-vertical"> 
      <p class="menu-landing-product" rel="cmd"> <a> Sencha Cmd </a> </p> 
      <p class="menu-landing-product" rel="extjs"> <a> Sencha Ext JS </a> </p> 
      <p class="menu-landing-product" rel="sencha_test"> <a> Sencha Test </a> </p> 
      <p class="menu-landing-product" rel="ide_plugins"> <a> Sencha IDE Plugins </a> </p> 
      <p class="menu-landing-product" rel="sencha_inspector"> <a> Sencha Inspector </a> </p> 
      <p class="menu-landing-product" rel="gxt"> <a> Sencha GXT </a> </p> 
      <p class="menu-landing-product" rel="webappmgr"> <a> Sencha Web Application Manager </a> </p> 
      <p class="menu-landing-product" rel="architect"> <a> Sencha Architect </a> </p> 
      <p class="menu-landing-product" rel="touch"> <a> Sencha Touch </a> </p> 
     </div> 
    </div> 
    <div id="menu-product-details"> 
     <div id="cmd-menu-product" class="menu-specific-product"> 
      <div class="menu-landing-doc-heading">
        Sencha Cmd 
      </div> 
      <div class="menu-landing-doc-heading">
        6.x 
      </div> 
      <a href="../6.x"> 6.x </a> 
      <span class="tpl-toc-img-new">★</span> 
      <br /> 
      <div class="menu-landing-doc-heading">
        5.x 
      </div> 
      <a href="../5.x"> 5.x </a> 
     </div> 
     <div id="extjs-menu-product" class="menu-specific-product"> 
      <div class="menu-landing-doc-heading">
        Sencha Ext JS 
      </div> 
      <div class="menu-landing-doc-heading">
        6.x 
      </div> 
      <a href="../../extjs/6.0/default.htm"> 6.0.2 </a> 
      <a class="menu-landing-zip" style="padding-right:0;" href="../../downloads/extjs-docs-6.0.2-classic.zip"> (classic) </a> 
      <a class="menu-landing-zip menu-landing-lesspad" href="../../downloads/extjs-docs-6.0.2-modern.zip"> (modern) </a> 
      <span class="tpl-toc-img-new">★</span> 
      <br /> 
      <a href="../../extjs/6.0/default.htm"> 6.0.1 </a> 
      <a class="menu-landing-zip" style="padding-right:0;" href="../../downloads/extjs-docs-6.0.1-classic.zip"> (classic) </a> 
      <a class="menu-landing-zip menu-landing-lesspad" href="../../downloads/extjs-docs-6.0.1-modern.zip"> (modern) </a> 
      <span class="tpl-toc-img-new">★</span> 
      <br /> 
      <a href="../../extjs/6.0/default.htm"> 6.0.0 </a> 
      <a class="menu-landing-zip" style="padding-right:0;" href="../../downloads/extjs-docs-6.0.0-classic.zip"> (classic) </a> 
      <a class="menu-landing-zip" style="padding-left:0;" href="../../downloads/extjs-docs-6.0.0-modern.zip"> (modern) </a> 
      <div class="menu-landing-doc-heading">
        5.1.x 
      </div> 
      <a href="../../extjs/5.1/default.htm"> 5.1.2 </a> 
      <a class="menu-landing-zip" href="../../downloads/extjs-docs-5.1.2.zip"> (offline docs) </a> 
      <br /> 
      <a href="../../extjs/5.1/default.htm"> 5.1.1 </a> 
      <a class="menu-landing-zip" href="../../downloads/extjs-docs-5.1.1.zip"> (offline docs) </a> 
      <br /> 
      <a href="../../extjs/5.1/default.htm"> 5.1.0 </a> 
      <a class="menu-landing-zip" href="../../../cdn.sencha.com/downloads/docs/ext-docs-5.1.0.zip"> (offline docs) </a> 
      <br /> 
      <div class="menu-landing-doc-heading">
        5.0.x 
      </div> 
      <a href="../../extjs/5.0/default.htm"> 5.0.1 </a> 
      <a class="menu-landing-zip" href="../../../cdn.sencha.com/downloads/docs/ext-docs-5.0.zip"> (offline docs) </a> 
      <br /> 
      <a href="../../extjs/5.0/default.htm"> 5.0.0 </a> 
      <a class="menu-landing-zip" href="../../../cdn.sencha.com/downloads/docs/ext-docs-5.0.0.zip"> (offline docs) </a> 
      <br /> 
      <div class="menu-landing-doc-heading">
        4.2.x 
      </div> 
      <a href="../../extjs/4.2.5/default.htm"> 4.2.5 </a> 
      <a class="menu-landing-zip" href="../../downloads/extjs-docs-4.2.5.zip"> (offline docs) </a> 
      <br /> 
      <a href="../../extjs/4.2.4/default.htm"> 4.2.4 </a> 
      <a class="menu-landing-zip" href="../../downloads/extjs-docs-4.2.4.zip"> (offline docs) </a> 
      <br /> 
      <a href="../../extjs/4.2.3/default.htm"> 4.2.3 </a> 
      <a class="menu-landing-zip" href="../../../cdn.sencha.com/downloads/docs/extjs-docs-4.2.3.zip"> (offline docs) </a> 
      <br /> 
      <a href="../../extjs/4.2.2/default.htm"> 4.2.2 </a> 
      <a class="menu-landing-zip" href="../../../cdn.sencha.com/downloads/docs/extjs-docs-4.2.2.zip"> (offline docs) </a> 
      <br /> 
      <a href="../../extjs/4.2.1/default.htm"> 4.2.1 </a> 
      <a class="menu-landing-zip" href="../../../cdn.sencha.com/downloads/docs/extjs-docs-4.2.1.zip"> (offline docs) </a> 
      <br /> 
      <a href="../../extjs/4.2.0/default.htm"> 4.2.0 </a> 
      <br /> 
      <div class="menu-landing-doc-heading">
        4.1.x 
      </div> 
      <a href="../../extjs/4.1.3/default.htm"> 4.1.3 </a> 
      <br /> 
      <a href="../../extjs/4.1.2/default.htm"> 4.1.2 </a> 
      <br /> 
      <a href="../../extjs/4.1.1/default.htm"> 4.1.1 </a> 
      <br /> 
      <a href="../../extjs/4.1.0/default.htm"> 4.1.0 </a> 
      <br /> 
      <div class="menu-landing-doc-heading">
        4.0.x 
      </div> 
      <a href="../../extjs/4.0.7/default.htm"> 4.0.7 </a> 
      <br /> 
      <a href="../../extjs/4.0.0/default.htm"> 4.0.0 </a> 
     </div> 
     <div id="sencha_test-menu-product" class="menu-specific-product"> 
      <div class="menu-landing-doc-heading">
        Sencha Test 
      </div> 
      <a href="../../sencha_test/index.html"> Sencha Test </a> 
      <span class="tpl-toc-img-new">★</span> 
     </div> 
     <div id="ide_plugins-menu-product" class="menu-specific-product"> 
      <div class="menu-landing-doc-heading">
        Sencha IDE Plugins 
      </div> 
      <a href="../../ide_plugins/jetbrains_ide_plugin.html"> JetBrains Plugin 6.x </a> 
      <span class="tpl-toc-img-new">★</span> 
      <br /> 
      <a href="../../ide_plugins/eclipse_ide_plugin.html"> Eclipse Plugin </a> 
      <span class="tpl-toc-img-new">★</span> 
      <br /> 
      <a href="../../ide_plugins/visual_studio_ide_plugin.html"> Visual Studio Plugin </a> 
      <span class="tpl-toc-img-new">★</span> 
     </div> 
     <div id="sencha_inspector-menu-product" class="menu-specific-product"> 
      <div class="menu-landing-doc-heading">
        Sencha Inspector 
      </div> 
      <a href="../../sencha_inspector/index.html"> Sencha Inspector 6.x </a> 
      <span class="tpl-toc-img-new">★</span> 
     </div> 
     <div id="gxt-menu-product" class="menu-specific-product"> 
      <div class="menu-landing-doc-heading">
        Sencha GXT 
      </div> 
      <!-- GXT 4.0 --> 
      <div class="menu-landing-doc-heading">
        4.0 
       <span class="tpl-toc-img-new">★</span> 
      </div> 
      <a href="../../../examples.sencha.com/gxt/4.0.1"> 4.0 Explorer Examples </a> 
      <br /> 
      <a href="../../../examples.sencha.com/gxt-edash/4.0.1"> 4.0 Dashboard Example </a> 
      <a class="menu-landing-zip" href="../../../cdn.sencha.com/gxt/examples-src/gxt-edash-4.0.1.zip"> (War) </a> 
      <br /> 
      <a href="../../gxt/4.x/default.htm"> 4.0 Guides </a> 
      <br /> 
      <a href="../../gxt/4.x/javadoc/gxt-4.0.0"> 4.0 Javadoc </a> 
      <br /> 
      <!-- GXT 3.1.x --> 
      <div class="menu-landing-doc-heading">
        3.1 
      </div> 
      <a href="../../../www.sencha.com/examples/default.htm"> 3.1.4 Examples </a> 
      <br /> 
      <a href="../../gxt/3.x/default.htm"> 3.1.4 Guides </a> 
      <br /> 
      <a href="../../gxt/3.x/javadoc"> 3.1.4 Javadoc </a> 
      <br /> 
      <!-- GXT 3.0.x --> 
      <!-- GXT 2.x --> 
      <div class="menu-landing-doc-heading">
        2.0 
      </div> 
      <a href="../../../https@www.sencha.com/examples-2/default.htm"> 2.3.1 Examples </a> 
     </div> 
     <div id="webappmgr-menu-product" class="menu-specific-product"> 
      <div class="menu-landing-doc-heading">
        Sencha Web Application Manager 
      </div> 
      <div class="menu-landing-doc-heading">
        6.0.x 
      </div> 
      <a href="../../webappmgr"> 6.0.0 </a> 
      <span class="tpl-toc-img-new">★</span> 
     </div> 
     <div id="architect-menu-product" class="menu-specific-product"> 
      <div class="menu-landing-doc-heading">
        Sencha Architect 
      </div> 
      <div class="menu-landing-doc-heading">
        3.x 
      </div> 
      <a href="../../architect/3.5/default.htm"> 3.5 </a> 
      <span class="tpl-toc-img-new">★</span> 
      <br /> 
      <a href="../../architect/3/default.htm"> 3.2 </a> 
      <a class="menu-landing-zip menu-landing-lesspad" href="../../../cdn.sencha.com/downloads/docs/architect-docs-3.zip"> (offline docs) </a> 
     </div> 
     <div id="touch-menu-product" class="menu-specific-product"> 
      <div class="menu-landing-doc-heading">
        Sencha Touch 
      </div> 
      <div class="menu-landing-doc-heading">
        2.4.x 
      </div> 
      <a href="../../touch/2.4/default.htm"> 2.4.2 </a> 
      <span class="tpl-toc-img-new">★</span> 
      <a class="menu-landing-zip menu-landing-lesspad" href="../../downloads/touch-docs-2.4.2.zip"> (offline docs) </a> 
      <br /> 
      <a href="../../touch/2.4/default.htm"> 2.4.1 </a> 
      <a class="menu-landing-zip" href="../../../cdn.sencha.com/downloads/docs/touch-docs-2.4.1.zip"> (offline docs) </a> 
      <br /> 
      <a href="../../touch/2.4/2.4.0-apidocs"> 2.4.0 </a> 
      <a class="menu-landing-zip" href="../../../cdn.sencha.com/downloads/docs/touch-docs-2.4.0.zip"> (offline docs) </a> 
      <div class="menu-landing-doc-heading">
        2.3.x 
      </div> 
      <a href="../../touch/2.3.1/default.htm"> 2.3.1 </a> 
      <a class="menu-landing-zip" href="../../../cdn.sencha.com/downloads/docs/touch-docs-2.3.1.zip"> (offline docs) </a> 
      <br /> 
      <a href="../../touch/2.3.0/default.htm"> 2.3.0 </a> 
      <a class="menu-landing-zip" href="../../../cdn.sencha.com/downloads/docs/touch-docs-2.3.0.zip"> (offline docs) </a> 
      <br /> 
      <div class="menu-landing-doc-heading">
        2.2.x 
      </div> 
      <a href="../../touch/2.2.1/default.htm"> 2.2.1 </a> 
      <a class="menu-landing-zip" href="../../../cdn.sencha.com/downloads/docs/touch-docs-2.2.1.zip"> (offline docs) </a> 
      <br /> 
      <a href="../../touch/2.2.0/default.htm"> 2.2.0 </a> 
      <br /> 
      <div class="menu-landing-doc-heading">
        2.1.x 
      </div> 
      <a href="../../touch/2.1.1/default.htm"> 2.1.1 </a> 
      <br /> 
      <a href="../../touch/2.1.0/default.htm"> 2.1.0 </a> 
      <br /> 
      <div class="menu-landing-doc-heading">
        2.0.x 
      </div> 
      <a href="../../touch/2.0.2/default.htm"> 2.0.2 </a> 
      <br /> 
      <a href="../../touch/2.0.1/default.htm"> 2.0.1 </a> 
      <br /> 
      <a href="../../touch/2.0.0/default.htm"> 2.0.0 </a> 
     </div> 
    </div> 
   </div> 
  </div> 
   
  <script type="text/javascript">
    adroll_adv_id = "5RM2BL5IGRFLRG5VDQ7OIE";
    adroll_pix_id = "LWO7UZXBFVESTOMYFI2LYS";
    /* OPTIONAL: provide email to improve user identification */
    /* adroll_email = "username_40example.com"; */
    (function () {
      var _onload = function(){
        if (document.readyState && !/loaded|complete/.test(document.readyState)){setTimeout(_onload, 10);return}
        if (!window.__adroll_loaded){__adroll_loaded=true;setTimeout(_onload, 50);return}
        var scr = document.createElement("script");
        var host = (("https:" == document.location.protocol) ? "../../../https@s.adroll.com" : "../../../a.adroll.com");
        scr.setAttribute('async', 'true');
        scr.type = "text/javascript";
        scr.src = host + "/j/roundtrip.js";
        ((document.getElementsByTagName('head') || [null])[0] ||
        document.getElementsByTagName('script')[0].parentNode).appendChild(scr);
      };
      if (window.addEventListener) {window.addEventListener('load', _onload, false);}
      else {window.attachEvent('onload', _onload)}
    }());
  </script> 
  <script>
    var menu = document.getElementById("tpl-toc"),
        link_obj = document.getElementById("mobile_menu_link"),
        links = menu.querySelectorAll('a');

    for(i=0; i < links.length; i++) {
      links[i].onclick = function() {
        var mq = window.matchMedia('only screen and (max-width: 768px)');

        if(mq.matches) {
          menu.style.display = 'none';
          link_obj.innerHTML = 'MENU';
        }
      }
    }
  </script> 
  <script type="text/javascript">
    </script>              <script src='../../../munchkin.marketo.net/munchkin-beta.js' type='text/javascript'></script><script>Munchkin.init('374-WES-121');</script>   
 
</body></html>